/**
 * 考勤记录
 * @author truexin
 * @date   16/08/18
 */

(function (lf, r) {
    
    let ajax = lf.utils.ajax,
        formatTime = lf.utils.format;
    
    var Body = r.createClass({
        
        render: function () {
            
            let me = this,
                user = me.props.user,
                workTime = me.props.workTime,
                len = workTime.length,
                name = user.name,
                list = workTime.map(function (info, i) {
                    if (len < 2) {
                        return (
                            <div className="flex">
                                <p className="flex-item">{info.time}</p>
                                <p className={"flex-item" }>
                                    {info.currentAddr}
                                </p>
                            </div>
                        )
                    } else {
                        if ((len >= 2 && i == 0) || (len >= 2 && i == len - 1)) {
                            return (
                                <div className="flex">
                                    <p className="flex-item">{info.time}</p>
                                    <p className={"flex-item" }>
                                        {info.currentAddr}
                                    </p>
                                </div>
                            )
                        }

                    }
                })
            return (
                <div>
                    <div id="mask-box">
                        <center >
                            <div className="flex">
                                <p className="flex-item"></p>
                            </div>
                            <div className="show-list">
                                {list}
                            </div>
                            <div id='close' className="flex">
                                <p className="flex-item">关闭</p>
                            </div>
                        </center>
                    
                    </div>
                    <div className="staff-name">{name}</div>
                    <div id="calendar"></div>
                    {
                        me.props.type ?
                            <div className="intro">
                                <div className="signed-intro">
                                    <span className="signed inline-block"></span>
                                    <span>正常</span>
                                </div>

                                <div className="missed-intro">
                                    <span className="missed inline-block"></span>
                                    <span>异常</span>
                                </div>

                                <div className="relax-intro">
                                    <span className="relax inline-block"></span>
                                    <span>休息</span>
                                </div>
                            </div> : ''
                    }
                </div>
            );
        }
    });
    
    var Root = r.createClass({
        getInitialState() {
            return ({
                monthList: [],
                workTime: [],
                type: false,
            })
        },
        componentDidMount() {
            this.renderCalendar();
            $('#close').on('touchend', ()=> {
                $('#mask-box').hide();
                return false; //制止冒泡
            });
        },
        componentWillMount() {

        },
        renderCalendar() {
            let me = this,
                user = this.props.user;
            
            $('#calendar').fullCalendar({ //这里开始绘画 日历,才能查询其中元素
                header: {
                    left: '',
                    center: 'prev,title,next',
                    right: '',
                },
                firstDay: 0,
                lang: 'zh-cn',
                monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"],
                viewRender: function (view) {
                    let arr = view.title.split(' '),
                        y = arr[0].split('年'),
                        m = arr[1].split('月'),
                        month = y[0] + '-' + m[0] + '-01';

                    ajax({
                        beforeSend() {
                            lf.appJs.doLoading(false);
                        },
                        type: "get",
                        data: {
                            staffId: user.id,
                            month: month,  //查询月份【如果是2016年08月，则传2016-08-01】
                        },
                    }, lf.api.attendance.recordList, (data) => {
                        // console.log(data);
                        let monthList = [];
                        
                        data.map(function (val) {
                            let fmt = 'yyyy-MM-dd',
                                style = {
                                    time: formatTime(val.recordDate, fmt),
                                    state: val.status,
                                }
                            monthList.push(style);
                        })
                        
                        me.setState({
                            monthList: monthList,
                            type: true,
                        })

                        me.renderStyle();
                        $('.fc-button').bind('click', me.renderStyle);
                    })
                },
                dayClick: function (date) {
                    let week = date._d.getDay(),
                        month = date._d.getMonth() + 1, //月份返回记得加一
                        recordDate = formatTime(date._d.getTime(), 'yyyy-MM-dd'),
                        day = date._d.getDate();

                    if (week == 1) {
                        week = '一';
                    }
                    if (week == 2) {
                        week = '二';
                    }
                    if (week == 3) {
                        week = '三';
                    }
                    if (week == 4) {
                        week = '四';
                    }
                    if (week == 5) {
                        week = '五';
                    }
                    if (week == 6) {
                        week = '六';
                    }
                    if (week == 0) {
                        week = '日';
                    }

                    ajax({
                        beforeSend() {
                            lf.appJs.doLoading(false);
                        },
                        type: "get",
                        data: {
                            staffId: me.props.user.id,
                            recordDate: recordDate,  //查询月份【如果是2016年08月，则传2016-08-01】
                        },
                        success: function (data) {
                            if (data.code == 200) {
                                // console.log(data);
                                me.setState({
                                    workTime: data.data.personalAttendanceDetailVos,
                                })
                                $('#mask-box').show();
                            } else {
                                return;
                            }
                        }
                    }, lf.api.attendance.record4Employee);
                    
                    $('#mask-box .flex:first > p').text(month + '月' + day + '日 ' + '  ' + ' 星期' + week); //mask title
                },
            });
            
        },
        renderStyle() {
            let me = this;

            $('.fc-button').off();

            $('.fc-prev-button').on('touchstart', ()=> {
                lf.appJs.doLoading(true);
                $('#calendar').fullCalendar('prev');
                lf.appJs.doLoading(false);
            });

            $('.fc-next-button').on('touchstart', ()=> {
                lf.appJs.doLoading(true);
                $('#calendar').fullCalendar('next');
                lf.appJs.doLoading(false);
            });


            $('.fc-body').find('.fc-bg').find("td:not('.fc-future, .fc-other-month')")
            .each(function (i, td) {
                let $me = $(this),
                    span = document.createElement('span'),
                    list = me.state.monthList,
                    date = $me.data('date');
                
                td.style.cssText = 'position:relative;';
                
                span.className = 'inline-block relax';
                
                list.map(e => {
                    if (e.time == date) {
                        span.className = e.state == 1 ? 'inline-block signed' : 'inline-block missed';
                    }
                })
                
                td.appendChild(span);
            });
            
        },
        render: function () {
            return <div className="calendar-cover">
                <Body user={this.props.user} workTime={this.state.workTime} type={this.state.type}/>
            </div>
        }
    });
    
    lf.appJs.getUser(function (user) {
        r.render(
            <Root user={user}/>,
            document.getElementById('root'), function () {
                $('#root').css({backgroundColor: '#f2f2f2'});
            }
        )
    });
})(liefeng, React)
